import {wp, viewportWidth, hp} from '@/utils/index';
import React from 'react';
import {Image, StyleSheet} from 'react-native';
import SnapCarousel, {
  AdditionalParallaxProps,
} from 'react-native-snap-carousel';

const imgUrls: Array<string> = [
  'https://pic1.zhimg.com/v2-51f39c8f94b6ba24b6eb02aa2622ff72_r.jpg?source=1940ef5c',
  'https://pic3.zhimg.com/v2-5684ee9e141da881c076a55f4c96a13e_r.jpg',
  'https://pic4.zhimg.com/v2-2553126d736fe7ed4db231c5c75edeae_r.jpg?source=1940ef5c',
];
const imgWidth = wp(90);
const itemWidth = imgWidth + wp(2) * 2;
const imgHeight = hp(26);
const style = StyleSheet.create({
  img: {
    width: itemWidth,
    height: imgHeight,
  },
});

class Carousel extends React.Component {
  renderItem = (
    {item}: {item: string},
    parallaxProps?: AdditionalParallaxProps,
  ) => {
    return (
      <Image
        style={style.img}
        source={{
          uri: item,
        }}
      />
    );
  };

  render() {
    return (
      <SnapCarousel
        data={imgUrls}
        renderItem={this.renderItem}
        sliderWidth={viewportWidth}
        itemWidth={itemWidth}
      />
    );
  }
}
export default Carousel;
